<template>
  <div class="flexC LifeCycle  ">
    <div class="flexC JustifyContentC">
      <div class="flexC AlignItemsC "><p class="font_s27 textC lc_top" style="color:#0A4D99;line-height:3.75rem; font-weight:bold; ">监管生命周期</p></div>
    </div>

    <div class="flex">
      <div class="flexC flex3" style="font-weight:400; padding-left: 3.3rem;">
        <p class="colorF font_s36 FontWeightB" style="line-height:4.4375rem;">{{ arrList.jgmc }}</p>
        <p class="font_s22" style="color: #E4EDF0;line-height:4.4375rem;">
          <img src="@/assets/img/polygon/09.png" alt="" />
          {{ arrList.jgdz }}
        </p>
        <div class="flex font_s30 JustifyContentSB AlignItemsC FontWeightB" style="padding-bottom: 5.375rem;">
          <div
            class="flexC JustifyContentC AlignItemsC"
            style="width:9rem;height:6.375rem;color: #6CF6FF; background:rgba(71,104,207,0.4);border:2px solid rgba(108, 246, 255, 0.47);border-radius:0.3125rem;"
          >
            <p>{{ arrList.fxfs }}</p>
            <p>{{ arrList.fxdj_srt }}</p>
          </div>
          <div
            class="flexC JustifyContentC AlignItemsC"
            style="width:8.9375rem;height:6.375rem;color:#6CF6FF; background:rgba(71,104,207,0.4);border:2px solid rgba(108, 246, 255, 0.47);border-radius:0.3125rem;"
          >
            <p>{{ arrList.fldj_srt }}</p>
          </div>
          <div style="padding-right:2rem;"><img :src="`${url}` + `${arrList.imgdz}`" alt="" style="width: 8.875rem ;height:8.5rem;" /></div>
        </div>
        <div class="flexC JustifyContentSA colorF font_s20">
          <p style="line-height:2.625rem;">
            机构代码：
            <span>{{ arrList.jgdm }}</span>
          </p>
          <p style="line-height:2.625rem;">
            法人代表：
            <span>{{ arrList.fddbr }}</span>
          </p>
          <p style="line-height:2.625rem;">
            联系人：
            <span>{{ arrList.lxr }}</span>
          </p>
          <p style="line-height:2.625rem;">
            联系电话：
            <span>{{ arrList.lxrdh }}</span>
          </p>
        </div>
      </div>

      <div class="flexC flex5 font_s22 superviseList" style="height: 63.5vh;margin: 0 3.4rem;">
        <div class="flex JustifyContentSA" v-for="(item, index) in dataList" :key="'list' + index">
          <p class="flex1" style=" color: #72F6F8; margin-top: 1rem;">{{ item.fxsj }}</p>
          <div style="width:0.75rem;height: height: 100%;background:rgba(89,249,250,1); margin-right: 1rem;">
            <div style="  margin:1rem -0.6rem; width:1.25rem;height:1.25rem; background:rgba(114,246,248,1);border:6px solid rgba(14,82,158,1);border-radius:50%;"></div>
          </div>

          <div class=" flex5 " style=" margin-top: 1rem;">
            <div class="flexC lc_p">
              <div class="flex JustifyContentSB AlignItemsC" style="padding: 1.5rem;">
                <p class="flex3" style="color: #72F6F8;">
                  来源：
                  <span class="colorF">{{ item.jgly }}</span>
                </p>
                <div class="flex flex3 textC" style="position: relative; line-height:2.75rem;">
                  <div class="flex flex1 JustifyContentC" style=" border:2px solid  #EC6141; color:  #EC6141;  margin-right: 0.5rem;position:relative;">
                    <img src="../../../assets/img/home/components/03.png" alt="" style="height: 2.75rem; position: absolute; left: 0;" />
                    <p>{{ item.fxjf }}分</p>
                  </div>

                  <div class="flex flex1 JustifyContentC" style=" border:2px solid  #EC6141; color:  #EC6141; margin-right: 0.5rem;position:relative;">
                    <img src="../../../assets/img/home/components/04.png" alt="" style="height: 2.75rem; position: absolute; left: 0;" />
                    <p>{{ item.xyjf }}分</p>
                  </div>
                  <p class="flex1 flex AlignItemsC JustifyContentC" style=" color: #F8B551;border:2px solid rgba(248,181,81,1);line-height: 1.5rem;padding: 0.25rem 0.15rem;">
                    {{ item.jglx }}
                  </p>
                </div>
              </div>

              <div class="flexC AlignItemsC"><div style="width: 41.4375rem;border:1px dotted rgba(114,246,248,1);"></div></div>
              <div class="flexC">
                <ul class="flexC JustifyContentSA font_s23 " style="padding: 1.5rem;">
                  <li class="flex flex1">
                    <p class="flex1" style="line-height:2rem;color: #72F6F8;">问题确认：</p>
                    <p class="colorF textL" style="flex:3.8">{{ item.jgqrnrbs }}</p>
                  </li>
                  <li class="flex flex1">
                    <p class="flex1" style="line-height:2rem;color: #72F6F8;">被监管对象：</p>
                    <p class="colorF textL" style="flex:3.8">{{ item.bjgdx }}</p>
                  </li>
                  <li class="flex flex1">
                    <p class="flex1" style="line-height:2rem;color: #72F6F8;">处置人：</p>
                    <p class="colorF textL" style="flex:3.8">{{ item.czr }}</p>
                  </li>
                  <li class="flex flex1">
                    <p class="flex1" style="line-height:2rem;color: #72F6F8;">处置状态：</p>
                    <p class="colorF textL" style="flex:3.8">{{ item.czzt }}</p>
                  </li>
                  <li class="flex flex1">
                    <p class="flex1" style="line-height:2rem;color: #72F6F8;">处置结果：</p>
                    <p class="colorF textL" style="flex:3.8">{{ item.czjg }}</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LifeCycle',
  props: {
    data: {
      type: Number,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      url: process.env.BASE_URL,
      dataList: [],
      iAshow: true,
      iAshows: true,
      arrList: {}
    }
  },
  mounted () {
    this.handle()
  },
  filters: {
    fxFun (value) {
      if (value === null) {
        return 'hide'
      } else {
        return 'show'
      }
    },
    xyFun (value) {
      if (value === null) {
        return 'hide'
      } else {
        return 'show'
      }
    }
  },
  methods: {
    handle () {
      // 当然如果你需要带登录信息去请求这个接口 可以在 路由后面跟上 true 或者 false 来决定是否在请求的时候带登录信息
      // 我们这样进行封装 就对一个 请求封装好了。
      this.$http.post(this.$api.JgJgSmzq.jgJgSmzq, 'fwjgid=' + this.data, true).then(result => {
        console.log(result.data.result.fxdj)
        this.dataList = result.data.result.jgJgSmzq

        let arr = [result.data.result]

        for (let i = 0; i < arr.length; i++) {
          if (arr[i].fxfs === null) {
            arr[i].fxfs = ''
          }
          if (arr[i].fxdj_srt === null) {
            arr[i].fxdj_srt = '无风险'
          }
          this.arrList = arr[i]
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.LifeCycle {
  .hide {
    display: none;
  }
  .show {
    display: block;
  }
  .lc_top {
    width: 17.875rem;
    height: 5.5625rem;
    // background: #72f6f8;
    background: url(../../../assets/img/home/components/smzq.png) no-repeat;
    background-size: 100% 100%;
  }
  .lc_p {
    width: 44.625rem;
    // height: 21rem;
    height: 100%;
    background: rgba(10, 72, 140, 1);
    font-weight: 400;
  }
}
</style>
